
<template>
  <div class="home-page">

    <search  v-bind:searchData="searchData" v-on:searchEvent="searchEventMethod"></search>

    <div v-show="isShow" style="float: left;width: 100%;">
      <div class="myLocation">
        <div class="route-item-container">
          <span class="myLocation-name">我当前的位置: {{start.address}}</span>
          <span class="btn-location-start" v-on:click="clickStart()">设为起点</span>
        </div>
      </div>

      <div class="route-item" v-if="isData === false">
        <div class="route-item-container" >
          <span class="route-item-direction">暂无查询结果</span>
        </div>
      </div>

      <div class="route-item" v-for="item in usedLineSiteData" v-else>
        <div class="route-item-container" v-on:click="setStart(item)">
          <img v-if="item.type==0" class="route-item-bus" src="../../assets/image/place-icon.png"/>
          <img v-else class="route-item-bus" src="../../assets/image/site-icon.png"/>
          <span class="route-item-name">{{item.address}}</span>
          <span v-if="item.type==0" class="route-item-direction">地点</span>
          <span v-else class="route-item-direction">公交站</span>
        </div>
      </div>
    </div>

  </div>


</template>

<script>
  import search from '../common/Search.vue';
  export default {
    data () {
      return {
        start: {},
        searchData: {
          placeholder: '请输入起点名称',
          isPullDown: true,
          page: this.$global.SEARCH_START_ADDRESS
        },
        usedLineSiteData: {},
        isShow: true,
        isData: true
      };
    },
    created () {
      if (this.$storage.getStorage('currentAddress')) {
        this.start = this.$storage.getStorage('currentAddress');
      }
      var params = {};
      params.addressType = 0;
      params.city = this.$storage.getStorage('currentCity'); // 当前城市
      var vueObj = this;
      this.$baseService.getData(vueObj.$global.API_GET_USER_ADDRESS, params, function (data) {
        vueObj.usedLineSiteData = Object.assign({}, vueObj.usedLineSiteData, data);
      });
    },

    methods: {
      setStart: function (address) {
        this.$storage.setStorage('startAddress', address);
        this.$router.push({path: '/'});
      },
      clickStart: function () {
        if (this.$storage.getStorage('currentAddress')) {
          this.$storage.setStorage('startAddress', this.start);
          this.$router.push({path: '/'});
        } else {
          this.$utils.toastMessage('无法获取当前定位！');
        }
      },
      /*
      触发搜索事件，隐藏搜索历史列表DIV
      */
      searchEventMethod: function (flag) {
        if (flag === 1) {
          this.isShow = true;
          this.isData = true;
        } else if (flag === 0) {
          this.isShow = false;
        } else if (flag === 2) {
          this.isShow = true;
          this.isData = false;
        }
      }
    },

    components: {
      search
    }

  };
</script>

<style scoped>
  .home-page {
    margin-top: 0.26rem;
  }

  .search {
    margin-left: 0.4rem;
    margin-right: 0.4rem;
    background-color: white
  }

  .myLocation{
    margin-top: 0.26rem;
    background-color: white;

  }
  .myLocation-name{
    padding-left: 0px;
    font-size: 0.37rem;
    color: #333333;
    align-self: center;
    flex: 1;
  }

  .btn-location-start{
    margin-right: 0.4rem;
    font-size: 0.37rem;
    color: #FB9528;
    background-color: white;
    align-self: center;
  }

  .route-item{
    background-color: white;
  }

  .route-item-container{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    margin-left: 0.4rem;
    height: 1.14rem;
  }

  .route-item-bus{
    width: 0.37rem;
    height: 0.45rem;
    align-self: center;
  }

  .route-item-name{
    padding-left: 0.26rem;
    font-size: 0.37rem;
    color: #333333;
    align-self: center;
  }

  .route-item-direction{
    padding-left: 0.26rem;
    font-size: 0.37rem;
    color: #666666;
    align-self: center;
  }

</style>
